<script setup lang="tsx">
import {
  ChatDotRound, DataBoard,
  DataLine, Delete,
  House,
  Message, Monitor,
  Notebook,
  Setting,
  Star,
  User
} from '@element-plus/icons-vue'

const props = defineProps<{
  icon: string
}>()

const iconElement = () => {
  switch (props.icon) {
    case 'User':
      return <User />
    case 'House':
      return <House />
    case 'DataLine':
      return <DataLine />
    case 'DataBoard':
      return <DataBoard />
    case 'Star':
      return <Star />
    case 'Message':
      return <Message />
    case 'Monitor':
      return <Monitor />
    case 'Notebook':
      return <Notebook />
    case 'Setting':
      return <Setting />
    case 'ChatDotRound':
      return <ChatDotRound />
    case 'Delete':
      return <Delete />
  }
}
</script>

<template>
  <el-icon>
    <!--  自定义图标组件 -->
    <iconElement />
  </el-icon>
</template>

<style scoped>

</style>
